import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import './CheckBox.css';

function CheckBox(props) {
  const { check, children, disabled, onChange, value, label } = props;
  const [checked, setChecked] = useState(check || false);

  return (
    <div>
      <label
        className={`agileh-checkbox-wrapper agileh-checkbox-group-item ${
          disabled ? 'agileh-checkbox-wrapper-disabled' : ''
        }`}
        onClick={(e) => {
          e.stopPropagation();
          setChecked(!checked);
          if (!disabled && onChange) {
            onChange({
              checked: !checked,
              value: children || label || value,
            });
          }
        }}
      >
        <span
          className={`agileh-checkbox ${checked ? 'agileh-checkbox-checked' : ''} ${
            disabled ? 'agileh-checkbox-disabled' : ''
          }`}
        >
          <span className="agileh-checkbox-inner"></span>
        </span>
        <span>{children || label || value}</span>
      </label>
    </div>
  );
}

// 类型检查
CheckBox.propTypes = {
  check: PropTypes.bool,
  disabled: PropTypes.bool,
  value: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  className: PropTypes.oneOfType([PropTypes.string]),
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
};

// 入参默认值
CheckBox.defaultProps = {
  checked: false,
  disabled: false,
  check: false,
};

export default CheckBox;
